<template>
  <div
    ref="pieone"
    id="pieon"
    style="margin-left: 40px; margin-top: 60px"
  ></div>
  <div
    ref="columnone"
    id="column"
    style="margin-left: 800px; margin-top: -530px"
  ></div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import axios from "axios";

export default {
  setup() {
    const pieone = ref(null);
    const columnone = ref(null);

    // 定义方法
    async function getEcharts() {
      try {
        // 从后端获取数据
        const response = await axios.get('/api/status-counts');
        const data = response.data;

        // 初始化Dom元素进行绘图
        const PieDome = echarts.init(pieone.value);
        const ColumnDome = echarts.init(columnone.value);

        // 南丁格尔玫瑰图选项
        const pieOption = {
          tooltip: {
        trigger: 'item' // 设置触发方式为 'item'，即点击或悬停时显示提示信息
      },
            legend: {
                top: '10', // 或者使用 'middle' 使图例居中对齐
                left: 'left',
                orient: 'vertical' // 设置图例布局为垂直方向
            },
            toolbox: {
            show: true,
            feature: {
            // mark: { show: true },
            saveAsImage: { show: true }
        },
        position: {
            top: 10, // 距离顶部的距离
            left: 10  // 距离左边的距离
        }
    },
          series: [
            {
              name: '房间状态',
              type: 'pie',
              radius: [50, 200],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: [
                { value: data['已预定'] || 0, name: '已预定', itemStyle: { color: '#006D77' } },
                { value: data['已入住'] || 0, name: '已入住', itemStyle: { color: '#0D3846' } },
                { value: data['空闲'] || 0, name: '空闲', itemStyle: { color: '#83C5BE' } },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
          ]
        };

        // 设置南丁格尔玫瑰图选项
        PieDome.setOption(pieOption);

        // 柱状图选项保持不变
        const columnOption = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: '数量',
            orient: 'vertical',
            left: 'left'
          },
          xAxis: {
            type: 'category',
            data: ['已预定', '已入住', '空闲']
          },
          yAxis: {
            type: 'value'
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
            //   dataView: { show: true, readOnly: false },
            //   restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: '数量',
              type: 'bar',
              data: [
                { value: data['已预定'] || 0, itemStyle: { color: '#006D77' } },
                { value: data['已入住'] || 0, name: '已入住', itemStyle: { color: '#0D3846' } },
                { value: data['空闲'] || 0, name: '空闲', itemStyle: { color: '#83C5BE' } }
              ]
            }
          ]
        };

        // 设置柱状图选项
        ColumnDome.setOption(columnOption);
      } catch (error) {
        console.error("Failed to fetch data:", error);
      }
    }

    // 挂载后调用
    onMounted(() => {
      getEcharts();
    });

    return {
      pieone,
      columnone,
    };
  },
};
</script>

<style scoped>
#pieon {
  width: 700px;
  height: 700px;
}

#column {
  width: 700px;
  height: 400px; /* 调整高度以适应柱状图 */
}
</style>